.box {
  position: absolute;
  width: 727px;
  height: 776px;
  margin: 0 auto;
  opacity: 0;
  transition: all 1s;
}
table {
  width: 727px;
  height: 776px;
  border: 5px solid black;
  box-sizing: border-box;
  background: url("../img/bg.jpg.png") no-repeat;
}
td {
  /* width: 30px;
  height: 30px; */
  border-radius: 50%;
  cursor: pointer;
}
.filter_td{
  filter: brightness(200%) contrast(200%);
}

.bgc1 {
 
  background: url("../img/ju.png");
}
.bgc2 {
  background: url("../img/ma.png");
}
.bgc3 {
  background: url("../img/xiang.png");
}
.bgc4 {
  background: url("../img/shi.png");
}
.bgc5 {
  background: url("../img/jiang.png");
}
.bgc6 {
  background: url("../img/pao.png");
}
.bgc7 {
  background: url("../img/zu.png");
}
.bgc8 {
  background: url("../img/red_ju.png");
}
.bgc9 {
  background: url("../img/red_ma.png");
}
.bgc10 {
  background: url("../img/red_xiang.png");
}
.bgc11 {
  background: url("../img/red_shi.png");
}
.bgc12 {
  background: url("../img/red_shuai.png");
}
.bgc13 {
  background: url("../img/red_pao.png");
}

.bgc14 {
  background: url("../img/red_bing.png");
}
[class^="bgc"] {
  background-size: 100%;
  transform: scale(0.9);
  background-repeat: no-repeat;
}
.dialog1,
.dialog2,
.dialog3 {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  background-color: rgba(138, 136, 136, 0.493);
  line-height: 100px;
  text-align: center;
  font-size: 60px;
  color: red;
  transform: translate(-50px, -50px);
}
.dialog1 {
  display: none;
}
.dialog2 {
  display: none;
  width: 200px;
}
.dialog3 {
  height: auto;
  left: -20%;
  background-color: #fff;
}

@media screen and (max-width: 700px) {
  .message3 {
    display: none;
  }
}

/* 棋子选中的样式 */
.checked {
  transform: translateY(-15px);
  transition: all 0.2s;
}

/* 棋子可移动坐标显示的样式 */
.showWays {
  position: relative;
}

.showWays::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  width: 10px;
  height: 10px;
  transform: translate(-5px, 3px);
}

/* __________________ */
#user {
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: rgb(252, 237, 218);
  opacity: 1;
  transition: all 0.5s;
}
#warp {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-200px, -100px);
  text-align: center;
  transition: all 0.5s;
}
#login_btn,
#math_btn {
  margin-top: 20px;
  border-style: none;
  color: #fff;
  background-color: rgb(112, 103, 90);
  transition: all 0.5s;
}
#login_btn:hover,
#math_btn:hover {
  cursor: pointer;
  color: black;
  background-color: #fff;
}
h1 {
  font-size: 50px;
}

#login {
  opacity: 1;
  transition: all 1s;
}
#math {
  opacity: 0;
  transition: all 1s;
  overflow: hidden;
}

#onlines {
  word-wrap: break-word;
  transition: all 0.5s;
}
